<template>
  <div class="pingjialiebiao">
    <div class="common-layout">
      <el-container>
        <!-- 头部 -->
        <el-header class="header">
          <!-- header1 -->
          <div class="header1">
            <el-form>
              学年学期：
              <!-- 下拉选择 -->
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form>
          </div>
          <!-- header2 -->
          <div class="header2">
            <div class="demo-date-picker">
              <div class="block">
                选择日期：
                <el-date-picker
                  v-model="value"
                  type="daterange"
                  start-placeholder="2023-1-1"
                  end-placeholder="2023-10-1"
                  :default-time="defaultTime"
                  size="small"
                />
              </div>
            </div>
          </div>
          <!-- header3 -->
          <div class="header3">
            <el-form>
              年级班级：
              <!-- 下拉选择 -->
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form>
          </div>
          <!-- header4 -->
          <div class="header4">
            学生姓名：
            <el-input class="m-2" v-model="input" placeholder="请输入" />
          </div>
          <div class="header5">
            <el-button type="primary" class="btn">查询</el-button>
          </div>
          <div class="header6">
            <el-button class="btn">重置</el-button>
          </div>
        </el-header>
        <!-- 中间部分 -->
        <el-main class="main">
          <div class="main-top">
            <el-button type="primary" class="fabu">发布评语</el-button>
          </div>
          <div class="main-middle">
            <!-- 表格 -->
            <el-table
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              stripe="ture"
              :data="tableData"
              border="true"
              size="small"
            >
              <!-- 序号 -->
              <el-table-column label="序号" width="60" prop="index">
                <template #default="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <!-- 姓名 -->
              <el-table-column label="学生姓名" width="80" prop="student">
                <template #default="scope">
                  <span>{{ scope.row.student.name }}</span>
                </template>
              </el-table-column>
              <!-- 年级班级 -->
              <el-table-column label="年级班级" prop="classes">
                <template #default="scope">
                  <span>{{
                    `${
                      scope.row.student.classes.gradeId == 3 ? "三" : "3"
                    }年级${
                      scope.row.student.classes.classId == 1 ? "一" : "二"
                    }班`
                  }}</span>
                </template>
              </el-table-column>
              <!-- 评价类型 -->
              <el-table-column label="评价类型" width="100">
                <template #default="scope">
                  <span>{{
                    evaluateType.find((item) => item.id == scope.row.typeId)
                      .name
                  }}</span>
                </template>
              </el-table-column>
              <!-- 评价内容 -->
              <el-table-column label="评价内容">
                <template #default="scope">
                  <span>{{ scope.row.detail }}</span>
                </template>
              </el-table-column>
              <!-- 分值 -->
              <el-table-column prop="num" label="分值" width="100">
                +1
              </el-table-column>
              <!-- 发布者 -->
              <el-table-column label="发布者" width="60">
                <template #default="scope">
                  <span>{{ scope.row.teacher.name }}</span>
                </template>
              </el-table-column>
              <!-- 发布时间 -->
              <el-table-column label="发布时间">
                <template #default="scope">
                  <span>{{ scope.row.time }}</span>
                </template>
              </el-table-column>
              <!-- 操作 -->
              <el-table-column prop="student" label="操作" width="100">
                <template #default="scope">
                  <el-button
                    class="caozuo"
                    type="danger"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                  <el-button class="caozuo" type="primary">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 底部 -->
          <div class="main-bottom"></div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";
import { colProps } from "element-plus";
import { onMounted, ref, reactive } from "vue";
import server from "@/api";

const value = ref("");
const input = ref("");
const inFormList = ref("");
const tableData = ref([]);
var photosId = ref();
var evaluateType = ref();

const options1 = [
  {
    value: "Option1",
    label: "一学期",
  },
  {
    value: "Option2",
    label: "二学期",
  },
];
const options2 = [
  {
    value: "Option1",
    label: "一年级",
  },
  {
    value: "Option2",
    label: "二年级",
  },
];
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]);

// 评价列表
onMounted(async () => {
  var res = await server.jiaxiaohutong.getEvaluateByPage();
  // console.log(res.data.data.date);
  tableData.value = res.data.data.date;
  // console.log(tableData.value);

  // 测评类型
  var res = await server.jiaxiaohutong.getEvaluateTypeAll();
  // console.log(res.data.data);
  evaluateType.value = res.data.data;
});

// 删除列表
var handleDelete = async (id) => {
  var res = await server.jiaxiaohutong.deleteEvaluate(id);
  // console.log(res.data.code);
  if (res.data.code == 200) {
    ElNotification.closeAll();
    ElNotification.success({ message: "删除成功！" });
    var i = tableData.value.findIndex((item) => item.photosId == photosId);
    if (i != -1) {
      tableData.value.splice(i, 1);
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.pingjialiebiao {
  height: 100%;
}
.common-layout {
  background: #f5f2f2;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 10px;
}
.header {
  height: 100px;
  background: white;
  margin-bottom: 10px;
  line-height: 100px;
  display: flex;
  justify-content: space-around;
}
.main {
  flex: 1;
  background: white;
}
.header1,
.header2,
.header3,
.header4 {
  font-size: 12px;
}
.m-2 {
  width: 90px;
}
.inp {
  width: 20px;
}

.btn {
  width: 50px;
}
.main-top {
  margin-top: 20px;
  height: 50px;
}
.fabu {
  margin-left: 900px;
  width: 80px;
}
.main-middle {
  margin-top: 60px;
  margin: auto;
  width: 999px;
}
.caozuo {
  width: 30px;
  height: 20px;
  font-size: 12px;
}
</style>